﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script>dojoConfig = { parseOnLoad: true }</script>
    <link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css" />
    <style type="text/css">
        @import "dojo/dojox/layout/resources/FloatingPane.css";
        @import "dojo/dojox/layout/resources/ResizeHandle.css";
    </style>
    <script src="dojo/dojo/dojo.js"></script>

    <script>
        dojo.require("dojox.layout.FloatingPane");
        dojo.require("dijit.form.Button");
        var pFloatingPane;
        dojo.ready(function () {
            pFloatingPane = new dojox.layout.FloatingPane({
                title: "A floating pane",
                resizable: true, able: true,
                style: "position:absolute;top:0;left:0;width:100px;height:100px;visibility:hidden;",
                id: "pFloatingPane"
            }, dojo.byId("pFloatingPane"));

            pFloatingPane.startup();
        });
    </script>
</head>
<body class="claro">
    <div id="pFloatingPane">This is the content of the pane!</div>
    <div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:function(){pFloatingPane.show();}"></div>
    <br /><br /><br /><br />
</body>
</html>